<template>
  <div>
    <el-select v-model="val" placeholder="请选择品牌名称" :disabled="isDisable" :clearable="canClear" @change="selectChange">
      <el-option v-for="(item, index) in brand_list" :key="index" :label="item.brand_name" :value="item.id" />
      <el-button v-if="isMore" type="text" size="mini" style="width:100%" @click="getMore">更多品牌</el-button>
    </el-select>
  </div>
</template>

<script>
import { getBrandList } from '@/api/brand'
export default {
  props: {
    isDisable: {
      type: Boolean,
      default: false
    },
    valProp: {
      type: String,
      default: ''
    },
    canClear: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      brand_list: [],
      isMore: false,
      p: 1,
      num: 10,
      status: 1,
      val: this.valProp
    }
  },
  computed: {
    newBrand() {
      return this.valProp
    }
  },
  watch: {
    newBrand(val) {
      this.val = val
    }
  },
  created() {
    this.getBrandList()
  },
  methods: {
    getBrandList() {
      const data = {
        p: this.p,
        num: this.num,
        status: this.status
      }
      getBrandList(data).then(res => {
        if (res.list.length) {
          this.isMore = res.ok
          if (this.brand_list.length === 0) {
            this.brand_list = res.list
          } else {
            this.brand_list.push(...res.list)
          }
        }
      })
    },
    getMore() {
      this.p++
      // console.log(this.p)
      this.getBrandList()
    },
    selectChange() {
      // console.log('chane', this.val)
      const value = this.val
      this.$emit('changeVal', value)
    }
  }
}
</script>

<style lang="sass" scoped>

</style>
